<!--
 * @Author: your name
 * @Date: 2021-06-10 21:51:10
 * @LastEditTime: 2021-07-23 22:00:47
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \hairdressing_web\src\commponents\public\cell\cell.vue
-->
<template>
  <div class="c-p15">
    <div class="c-flex">
      <div class="c-flex-2 left">
        {{ left }}
      </div>
      <div class="c-flex-9 center">{{ center }}<text v-if="num" class="color-main">{{num}}</text></div>
      <div class="c-flex-1 c-align-right" @click="open">
        <u-icon :name="right" size="20" color="#868686"></u-icon>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    props: ['left', 'center', 'right', 'num'],
    methods: {
      open() {
        this.$emit('open')
      }
    }
  }
</script>
<style lang="scss" scoped>
  .c-p15 {
    padding: 10px 15px;
    line-height: 20px;
  }
  .c-flex {
    display: flex;
  }
  .c-flex-1 {
    flex: 1;
  }
  .c-flex-2 {
    flex: 2;
  }
  .c-flex-3 {
    flex: 3;
  }
  .c-flex-4 {
    flex: 4;
  }
  .c-flex-6 {
    flex: 6;
  }
  .c-flex-7 {
    flex: 7;
  }
  .c-flex-9 {
    flex: 9;
  }
  .c-align-right {
    text-align: right;
  }
  .left {
    font-size: 12px;
    color: #8a8a8a;
  }
  .center {
    color: #303030;
    font-size: 13px;
  }
</style>
